import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import cn from 'classnames';
import { Button, Empty, Table } from 'antd';
import EmptyBgSvg from '@containers/asset-manage/components/asset-content/images/empty-bg.svg';

const PortInfoTab = props => {
  const { currentDetail = {}, onChangeInformation } = props;
  let {
    portInfos = [],
    riskPorts = [],
    riskServices = [],
    riskComponents = [],
    ip = ''
  } = currentDetail;
  portInfos = portInfos
    .map(r => {
      if (!r) {
        return {};
      }
      return r;
    })
    .sort((a, b) => {
      return a.port - b.port;
    });
  const columns = [
    {
      title: '端口',
      render: info => {
        const value =
          _.get(info, 'protocol') && _.get(info, 'protocol') !== 'icmp'
            ? `${_.get(info, 'port')}(${_.get(info, 'protocol')})`
            : `${_.get(info, 'port')}`;

        const service = (_.get(info, 'service', '') || '').match(/^http(s)?/);
        const isRisk = _.includes(riskPorts, _.toString(_.get(info, 'port')));
        const url = service ? `${service[0]}://${ip}:${_.get(info, 'port')}` : null;
        return (
          <div>
            <span className={cn('port', { 'is-risk': isRisk })}>{value}</span>
            {url && (
              <span className={'linkIcon'} onClick={() => window.open(url, '_blank')}>
                <label>{'>'}</label>
              </span>
            )}
          </div>
        );
      }
    },
    {
      title: '服务',
      dataIndex: 'service',
      render: value => (
        <span className={cn('service', { 'is-risk': _.includes(riskServices, value) })}>
          {value}
        </span>
      )
    },
    {
      title: '组件',
      dataIndex: 'components',
      render: components => (
        <React.Fragment>
          {_.map(components, ({ fullName, name, isDomestic }, index) => {
            const tail = index === components.length - 1 ? null : ', ';
            return (
              <React.Fragment>
                <span
                  key={fullName}
                  className={cn('component', { 'is-risk': _.includes(riskComponents, name) })}
                >
                  {isDomestic ? `${fullName}(国产化)` : fullName}
                </span>
                {tail}
              </React.Fragment>
            );
          })}
        </React.Fragment>
      )
    },
    {
      title: '信息',
      render: (info, { newInfo }) => {
        const banner = _.get(info, 'banner');
        const body = _.get(info, 'body');
        const ssl = _.get(info, 'ssl');
        return (
          <span className={cn('information', { 'is-new': newInfo })}>
            {banner ? (
              <Button onClick={() => onChangeInformation('Banner信息', banner)} type="link">
                Banner
              </Button>
            ) : (
              ''
            )}
            {body ? (
              <Button onClick={() => onChangeInformation('网页信息', body)} type="link">
                网页
              </Button>
            ) : (
              ''
            )}
            {ssl ? (
              <Button onClick={() => onChangeInformation('SSL证书', ssl)} type="link">
                SSL
              </Button>
            ) : (
              ''
            )}
          </span>
        );
      }
    }
  ];
  return _.isEmpty(portInfos) ? (
    <Empty className="empty-extra" image={EmptyBgSvg} description="诶，好像什么都没有" />
  ) : (
    <div className="port-info">
      <div className="port-info-title">端口/服务/组件</div>
      <Table
        pagination={false}
        className="port-info-table"
        columns={columns}
        dataSource={portInfos}
        bordered
      />
    </div>
  );
};

PortInfoTab.propTypes = {
  currentDetail: PropTypes.object.isRequired,
  onChangeInformation: PropTypes.func.isRequired
};

export default PortInfoTab;
